<template>
  <div class="video-wrapper">
    <video
      id="my-video"
      class="video-js"
      controls
      preload="auto"
      width="100%"
      height="100%"
      poster="MY_VIDEO_POSTER.jpg"
      data-setup="{}"
    >
      <source :src="path" />
      <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a web browser that
        <a
          href="https://videojs.com/html5-video-support/"
          target="_blank"
        >supports HTML5 video</a>
      </p>
    </video>
    <!-- <video id="my-player" controls preload="auto" width="100%" height="350">
          <source :src="curUrl" type="application/x-mpegURL" />
    </video>-->
  </div>
</template>

<script>
import Video from "video.js";
export default {
  data() {
    return {
      path: null,
      options: {
        autoplay: true,
        preload: "auto",
        width: "100%",
        height: "100%",
        poster: "MY_VIDEO_POSTER.jpg"
      }
    };
  },
  created() {
    this.path = this.$route.query.path;
    console.log(this.path)
    this.$nextTick(() => {
      this.player = Video("my-video", this.options, function onPlayerReady() {
        this.play();
      });
    });
  },
  destroyed() {
    this.player.dispose();
  }
};
</script>

<style lang="scss" scoped>
.video-wrapper,
#my-video {
  display: relative;
  width: 100%;
  height: 100%;
}
</style>
